import React from 'react';
import ReactDom from 'react-dom';


// 只有类组件有生命周期

class Counter extends React.Component {
    //0：设置默认属性
    static defaultProps = {
        name: 'zhufeng'
    }

    //1：执行构造函数，设置初始状态
    constructor(props) {
        super(props)
        this.state = {count: 0}
        console.log('执行构造函数，设置初始状态')
    }

    //2：componentWillMount（只会执行一次）---(先父后子)
    componentWillMount() {
        console.log('componentWillMount:组件将要挂载到页面上')
    }

    //值虽然修改完毕，但是需要往下进行一步，询问组件是否需要更新？5
    handlerClick = (event) => {
        this.setState({count: this.state.count + 1})
    };

    //5：询问组件是否需要更新
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('5:询问组件是否需要更新');
        // return nextState.count % 3 === 0;
        return true
    }

    // 6： 组件将要更新
    componentWillUpdate(nextProps, nextState, nextContext) {
        console.log('6. 组件将要更新')
    }

    //7：render执行，渲染更新，最新状态更新到界面
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('7.render完的最新状态，已经同步到界面中了')
    }


    //3：render:要返回虚拟dom(props更新)
    render() {
        console.log('render:确定要显示的虚拟dom是什么？');


        return (

            <div>
                <p>{this.state.count}</p>
                <button onClick={this.handlerClick}>+</button>
                <hr/>
                {/*<ChildCounter count={this.state.count} name={'12'}/>*/}
                {
                    this.state.count < 3 ? <ChildCounter count={this.state.count} name={'12'}/> : null
                }
            </div>
        )
    }

    // 4：（只会执行一次,且先子后父）当此虚拟DOM已经被挂载到真实DOM中之后，就会执行componentDidMount，这个时候才能获得真实的dom元素
    componentDidMount() {

        console.log('componentDidMount')
    }
}

class ChildCounter extends React.Component {


    componentWillReceiveProps(nextProps, nextContext) {
        console.log('ChildCounter', nextProps)
    }


    //询问组件是否需要更新（检测到props值已经变化，根据条件判断是否需要更新）
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('ChildCounter:询问组件是否需要更新');
        // return nextProps.count % 9 === 0;
        return true
    }


    // 组件将要更新
    componentWillUpdate(nextProps, nextState, nextContext) {
        console.log('ChildCounter. 组件将要更新')
    }

    //render执行，渲染更新，最新状态更新到界面
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('ChildCounter.render完的最新状态，已经同步到界面中了')
    }

    //destroy
    componentWillUnmount() {
        console.log('ChildCounter 将要被销毁了')
    }

    render() {
        console.log('ChildCounter--render', this.props);

        return (
            <div>
                <p>{this.props.count}</p>
            </div>

        )
    }

}


ReactDom.render(<Counter/>, document.getElementById('root'));
